<template>
	<view class="page">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true"  touch-action:none class="carousel" circular="true" indicator-active-color="red"
		 indicator-color="#999999">
			<swiper-item v-for="(item,index) in carouselList" :key="index">
				<navigator open-type="navigate" :url="'../movie/movie?trailerId=' + item.movieId">
					<image class="carousel" :src="item.image" mode="widthFix"></image>
				</navigator>
			</swiper-item>

		</swiper>
		<!-- 轮播图 -->

		<!-- 热门超英 -->
		<titleHot src="/static/icos/hot.png" title="热门超英"></titleHot>
		<scroll-view scroll-x="true" class="page-block hot">
			<view>
				<view class="single-poster" v-for="(item, index) in hotSuperherolList" :key="index">
					<view class="poster-wapper">
						<navigator open-type="navigate" :url="'../movie/movie?trailerId=' + item.id">
						<image class="poster" :src="item.cover" mode=""></image>
						</navigator>
						<view class="movice-name">
							{{item.name}}
						</view>

						<trailerStars :innerScore="item.score" :showNum="1"></trailerStars>
					</view>
				</view>

			</view>

		</scroll-view>

		<!-- 热门预告 start-->
		<titleHot src="/static/icos/interest.png" title="热门预告"></titleHot>
		
		<view class="hot-movies page-block">
			<video v-for="(trailer,index) in hotTrailerList" :key="index" 
			:id="trailer.id"
			@play="meIsPlaying"
			:data-playingindex="trailer.id"
			:src="trailer.trailer" 
			:poster="trailer.poster"
			 enable-play-gesture="true"
			 enable-progress-gesture="true"
			 show-center-play-btn="true"
			 page-gesture="true"
			 show-play-btn="true"
			 play-btn-position="bottom"
			class="hot-movie-single"
			controls="true"></video>
			 
			 
		</view>
		<!-- 热门预告 end-->
		
		<!-- 猜你喜欢 -->
		<titleHot src="/static/icos/guess-u-like.png" title="猜你喜欢"></titleHot>

		<view class="page-block guess-u-like">

			<view class="single-like-movie" v-for="(item,index) in guessULikeList" :key="index">
				<navigator open-type="navigate" :url="'../movie/movie?trailerId=' + item.id">
				<image class="like-movie" :src="item.cover" mode="widthFix"></image>
				</navigator>
				<view class="movie-desc">
					<view class="movie-title">
						{{item.name}}
					</view>
					<trailerStars :innerScore="9.1" :showNum="0"></trailerStars>
					<view class="movie-info">
						<view class="">{{item.basicInfo}}</view>
						<view class="">{{item.releaseDate}}</view>
					</view>
				</view>
				<view class="movie-oper" :data-gIndex="index" @click="praiseMe">
					<image class="praise-ico" src="/static/icos/praise.png" mode=""></image>
					<view class="praise-me">点赞</view>
					<view class="praise-me animation-opacity" :animation="animationDataArr[index]">+1</view>
				</view>
			</view>

		</view>
		<!-- 猜你喜欢 -->


	</view>

</template>

<script>
	// import common from "../../common/common.js"
	import trailerStars from "../../components/trailerStars.vue"

	import titleHot from "../../components/hotTitleView.vue"
	export default {
		components: {
			trailerStars,
			titleHot
		},

		data() {
			return {
				carouselList: [],
				hotSuperherolList: [],
				hotTrailerList: [],
				animationData: {},
				guessULikeList: [],
				animationDataArr: [{}, {}, {}, {}, {}]
			}
		},
		onUnload() {
			this.animationData = {};
			animationDataArr: [{}, {}, {}, {}, {}]
		},
		onHide() {
				if(this.videoContext){
					this.videoContext.pause();
				}
		},
		onPullDownRefresh(){
			this.refresh()
		},
		onLoad() {
			var me = this;
			//在页面创建的时候，创建一个临时动画
			//#ifdef APP-PLUS || MP-WEIXIN
			this.animation = uni.createAnimation();
			//#endif
			
			var serverUrl = me.serverUrl;
			
			// url: common.serverUrl + '/index/carousel/list?qq=3316368400',
			//轮播图
			uni.request({
				url: serverUrl + '/index/carousel/list?qq=3316368400',
				method: "POST",

				header: {
					'custom-header': 'hello'
				},
				success: (res) => {
					// console.log(res.data);
					if (res.data.status == 200) {
						this.carouselList = res.data.data

					}
				}
			});
			//查询热门超英
			uni.request({
				url: serverUrl + '/index/movie/hot?type=superhero&qq=3316368400',
				method: "POST",
				success: (res) => {
					// debugger
					// console.log(res.data);
					if (res.data.status == 200) {
						this.hotSuperherolList = res.data.data

					}
				}
			});

			// trailer
			// 热门预告
			uni.request({
				url: serverUrl + '/index/movie/hot?type=trailer&qq=3316368400',
				method: "POST",
				success: (res) => {
					// debugger
					// console.log(res.data);
					if (res.data.status == 200) {
						this.hotTrailerList = res.data.data

					}
				}
			});
			me.refresh();
		},
		methods: {
			// 播放一个视频的时候，需要暂停其他正在播放的视频
			meIsPlaying(e){
				var me = this;
				var trailerId = "";
				
				if(e){
					trailerId = e.currentTarget.dataset.playingindex;
					me.videoContext = uni.createVideoContext(trailerId);
				}
				var hotTrailerList = me.hotTrailerList;
				for(var i = 0; i < hotTrailerList.length; i++){
					var tempId = hotTrailerList[i].id;
					if(tempId != trailerId){
						uni.createVideoContext(tempId).pause();
					}
				}
			},
			refresh(){
				var me = this;
				uni.showLoading({
					title:'正在拼命加载中...',
					mask:true
				});
				uni.showNavigationBarLoading();
				
				//猜你喜欢
				var serverUrl = me.serverUrl;
				uni.request({
					url: serverUrl + '/index/guessULike?qq=3316368400',
					method: "POST",
					success: (res) => {
						// debugger
						// console.log(res.data);
						if (res.data.status == 200) {
							this.guessULikeList = res.data.data
				
						}
					},
					complete:() => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			
			//实现点赞动画效果
			praiseMe(e) {
				var gIndex = e.currentTarget.dataset.gindex;
				//#ifdef APP-PLUS || MP-WEIXIN
				// 构建动画数据，并且通过step来表示这组动画的完成
				this.animation.translateY(-80).opacity(1).step({
					duration: 400
				});

				// 导出动画数据到view组件，实现组件的动画效果
				this.animationData = this.animation;
				this.animationDataArr[gIndex] = this.animationData.export();

				// 还原动画
				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					});
					this.animationData = this.animation;
					this.animationDataArr[gIndex] = this.animationData.export();
				}.bind(this), 500)
				//#endif
			}
		}
	}
</script>

<style>
	@import url("index.css");

	.uni-swiper-dots {
		bottom: 20px !important;
		right: 10px !important;
	}
</style>
